<template>
  <div class="mybody">
    <h4>词汇</h4> <br><br><br>
    <li v-for="(item,index) in books"  class="myul">
<!--      <span>{{item}}</span>-->
      <input class="mymargin mybtn " type="button" :value="item.name"  v-on:click="words(item.path,item.name,item.count)"><br><br>
    </li>
  </div>
</template>

<script>
    export default {
        name: "Words",
      data(){
          return{
            books:[]
          }
      },
      methods: {
        words(path,name,count){
          this.$router.push({
            name: 'word',
            params: {
              path:path,
              name:name,
              count:count
            }
          })
        }
      },
      created() {
        this.books=require('../assets/' + 'book.json')
      }
    }
</script>

<style scoped>
  .btn-audio{
    margin: 90px auto;
    width: 186px;
    height: 186px;
    background-size:cover;
  }
  li{
    /*display: none;*/
  }
  .mybtn{
    width:50%;height:40px;border:2px #f3e9f6;float:left;
    background-color: #aee4ff;
    margin-left: 25%;
    text-align: center;
  }
  .myul{
    /* 去掉 li 前面默认的点  */
    list-style-type:none;

  }
  .mymargin{margin-top:30px;}
  .mybody{
    /*border:1px solid #a09e9d;position:fixed;top:0px;float:inherit;width:100%;*/
    top: 0px;
    left: 0px;
  }
</style>
